/*
*作者---杨彬
*
*/
<template>
    <div>
       <div class="message-warp">
            <div class="message-content">
              <div class="tltle-warp"><img src="../../assets/address/contacts.png"
              class="contacts-img com-div-middle-ab"><span class="title" v-text="sData.address.add.person[0]"></span></div>
              <div class="name-warp"><input
                :placeholder="sData.address.add.person[1]" class="is-input" v-model="thisItem.consignee"></div>
              <div class="tel-warp"><input
                :placeholder="sData.address.add.person[2]" class="is-input tel" v-model="thisItem.phone"></div>
              <div class="age-warp" v-if='false'>
                <input
                :placeholder="sData.address.add.person[3]" class="is-input" v-model="thisAge.ageGroupValue" :value='111' disabled="disabled">
                <select :placeholder="sData.address.add.person[3]" class="is-select" v-model="thisAge">
                  <option :value="litem" v-for="(litem,lindex) in ageGroup" v-text="litem.ageGroupValue" :selected="(litem.ageGroupValue=='10-20')?'selected':''"></option>
                </select>
                <img
                src="../../assets/address/downpull.png" class="downpull com-div-middle-ab" ></div>
              <div class="sex-warp"  v-if='false'>
                <label>
                  <input type="radio" name="sex" value="男" v-model="thisItem.gender" :checked="$route.params.index==='true'">
                  <img class="isChecked-img" src="../../assets/address/checked.png">
                  <img class="notChecked-img" src="../../assets/address/notCheck.png">
                </label>
                <span v-text="sData.address.add.sex[0]" ></span>
                <label>
                  <input type="radio" name="sex" value="女" v-model="thisItem.gender">
                  <img class="isChecked-img" src="../../assets/address/checked.png">
                  <img class="notChecked-img" src="../../assets/address/notCheck.png">
                </label>
                <span v-text="sData.address.add.sex[1]"></span>
              </div>
            </div>
       </div>
      <div class="message-warp">
        <div class="message-content">
          <div class="tltle-warp"><img src="../../assets/address/addressImg.png"
               class="contacts-img com-div-middle-ab"><span class="title" v-text="sData.address.add.address[0]"></span></div>
          <div class="address-warp" @click="openALertFn()"><input type='text'
            :placeholder="sData.address.add.address[1]" class="is-input"
            :value="thisPCD"
                                           disabled="disabled"><img
            src="../../assets/address/downpull.png" class="downpull com-div-middle-ab">
          </div>
          <div class="detail-address-warp"><input type="text" v-model="thisItem.detailAddress"
            :placeholder="sData.address.add.address[2]" class="is-input"></div>
        </div>
      </div>
      <div class="this-space"></div>
      <div class="tag-content-warp">
        <div class="tag-content">
          <div class="tag-title"><img class="tag-title-img com-div-middle-ab"
            src="../../assets/address/tag.png"><span
            v-text="sData.address.add.tagText" class="tag-title-text"></span></div>
          <div class="tag-type"><label v-for=" (vitem,vindex) in sData.address.add.type">
            <input class="tag-radio" type="radio" name="type"
                   :value="vitem"  v-model="thisItem.label"
                   :checked="vitem==thisItem.label"><span
            class="tag-item-text" v-text="vitem"></span></label></div>
          <div class="tag-default"><label
            class="tag-default-label com-div-middle-ab"><input
            class="tag-default-checkbox" name="isDefault" v-model='thisItem.isDefault' value="true"
            type="checkbox"  :checked="thisItem.isDefault==true"><img
            src="../../assets/address/addDefault.png" class="tag-default-check"><img
            src="" class="tag-default-notcheck"></label><span
            class="tag-default-text" v-text="sData.address.add.setDefault"></span></div>
        </div>
      </div>
      <footer class="address-add-foot" v-text="sData.address.add.submitText[0]" @click="addressAction(true)" v-if="$route.params.index==='true'"></footer>
      <footer class="address-add-foot" v-text="sData.address.add.submitText[1]" @click="addressAction(false)" v-if="$route.params.index!=='true'"></footer>
      <area-linkage @upAreaMsg='upAreaMsgFn' :upAreaData='upAreaData' :sData='sData' v-if="openAreaMark">

      </area-linkage>
    </div>
</template>
<script type="text/javascript">
  import areaLinkage from '../com/areaLinkage/areaLinkage.vue';
  export default {
    data() {
      return {
        thisGetData: "",
        thisItem: {
          "id": '',
          "provinceName": "",
          "cityName": "",
          "districtName": "",
          "provinceCode": '',
          "cityCode": '',
          "districtCode": '',
          "detailAddress": "",
          "label": "",
          "phone": "",
          "gender": "",
          "consignee": "",
          "isDefault": "",
        },
        // thisAge:{
        //   ageGroupValue:'',
        //   val:''
        // },
        thisPCD: "",
        //ageGroup: [],
        submitDis: false,
        openAreaMark: false,
        upAreaData: {
          provinceName: [],
          cityName: [],
          districtName: [],
          initCity: function () {
            this.cityName = [];
            this.districtName = [];
          },
          initDistrict: function () {
            districtName = []
          }
        }
      }
    },

    updated(){
      // var oflag=true;
      // // for( var okey in this.thisItem){
      // //   if(typeof this.thisItem[okey]!==false&&this.thisItem[okey]==''){
      // //     oflag=false;
      // //   }
      // // }
      // this.submitDis=oflag;

    },
    components: {
      areaLinkage
    },
    methods: {
      openALertFn(){
        this.openAreaMark = true;
      },
      upAreaMsgFn(oObj){
        this.openAreaMark = false;
        console.log(oObj)
        if(oObj){
          if (!oObj.province.id) {
            return;
          }
          this.thisItem.provinceName = oObj.province.name;
          this.thisItem.provinceCode = oObj.province.id;
          this.thisItem.cityName = oObj.city.name;
          this.thisItem.cityCode = oObj.city.id;
          this.thisItem.districtName = oObj.district.name;
          this.thisItem.districtCode = oObj.district.id;
          this.buildPCDFn();
        }else{
          console.log('未修改');
        }
        
      },
      buildPCDFn(){
        let ostring = "";
        if (this.thisItem.provinceName) {
          ostring += '/' + this.thisItem.provinceName
        }
        if (this.thisItem.cityName) {
          ostring += '/' + this.thisItem.cityName
        }
        if (this.thisItem.districtName) {
          ostring += '/' + this.thisItem.districtName
        }
        ostring = ostring.substring(1, ostring.length)
        this.thisPCD = ostring;
      },
      getData(){
        this.getAjax(this.sData.url.addressManage,
          {userId: this.sData.userId, isDefault: ''}, (res)=> {
            if (res.data && res.data.length >= 1) {
              this.thisGetData = res.data;
              this.thisItem = this.thisGetData[this.$route.params.index];
              //this.thisAge.ageGroupValue = this.thisItem.ageGroupValue;
              console.log(this.thisItem)
              this.buildPCDFn()

            }
          })
      },
      addressAction(obool){
        let thisUrl = obool===false ? this.sData.url.addressModify : this.sData.url.addressAdd;
        if (this.thisItem.isDefault == "" || this.thisItem.isDefault == false) {
          this.thisItem.isDefault = false;
        }
        if(obool){
          this.thisItem['userId']=this.sData.userId;
          delete this.thisItem.id;
          delete this.thisItem.id;
          delete this.thisItem.id;
        }else{
          this.thisItem['userId']=this.sData.userId;
        }
        //this.thisItem['ageGroupId']=this.thisAge.id;

        console.log(this.thisItem);
        if(!(/^1[34578]\d{9}$/.test(this.thisItem.phone))){
          m$.template({
            val:'电话号码填写错误',
            time:1200
          })
        }else{
          console.log(this.thisItem);
          this.postAjax(thisUrl, this.thisItem, (res) =>{
            if(res.status==200){
              if(this.$route.params.goDetail==true){
                this.$router.push({name:'addressManage',
                params:{changeCheck:'true'}})
              }else{
                this.$router.push({name:'addressManage',
                params:{changeCheck:'false'}})
              }
              
            }else{
              m$.template({
                  val:res.message,
                  time:1200
                })
            }
          })
        }
        
      }
      // getAgeGroupData(oid){
      //   this.getAjax(this.sData.url.getAgeGroup, {groupId: oid ? oid : ''}, (res)=> {
      //     this.ageGroup = res.data;
      //     console.log(this.ageGroup)
      //   })
      // }
    },
    props: ["sData"],
    created(){
      document.title = this.$route.params.index === 'true' ? this.sData.address.add.submitText[0] : this.sData.address.add.submitText[1];
      if (this.$route.params.index !== 'true') {
        this.getData()
      }
      //this.getAgeGroupData();

    }
  }
</script>
<style scoped lang="less">
    @import "addressAdd";
</style>
